import React, {Component} from 'react';
import cssModule from './CompanyHomepage.module.less'
import testimg from "../../assets/img/001.jpg";

import {NavBar, Modal, List, Button, WhiteSpace, WingBlank, Icon} from "antd-mobile";


class CompanyHomepage extends Component {
    state = {
        isShowPostModal: false       // 底部弹窗
    }
    // 公司福利
    companyFree = [
        {name: "五险一金", icon: "iconbaohu"},
        {name: "医疗保险", icon: "iconyiliao"},
        {name: "交通报销", icon: "iconjiaotongbaoxiao"},
        {name: "员工生日", icon: "iconliwu"},
        {name: "餐补", icon: "iconcanju"},
        {name: "员工定期体检", icon: "icontijianke"},
        {name: "员工旅游", icon: "iconlvyou"}
    ]
    len = new Array(10).fill(10)
    onBack = () => this.props.history.goBack()
    onGoTo = (url) => this.props.history.push(url)
    onModalClose = () => this.setState({isShowPostModal: false})
    openModal = ()=> this.setState({isShowPostModal: true})
    render() {
        let {isShowPostModal} = this.state
        return (
            <div className={cssModule.yp}>
                {/*导航栏*/}
                <NavBar
                    className='stickyTop0'
                    mode="dark"
                    leftContent={[
                        <i key="0" className='iconfont fo-24 mr10' onClick={() => this.onBack()}> &#xe744;</i>,
                    ]}
                    rightContent={[
                        <i key="1" className='iconfont fo-24 mr10'>&#xe604;</i>,
                        <i key="2" className='iconfont fo-24'>&#xe636;</i>
                    ]}
                />

                {/*公司头像 + 标题 + 规模*/}
                <section className='flex just-spa-bet padd20'>
                    <div>
                        <p className='font-wei600 fo-30'>浙江华数集团</p>
                        <p className='fo-gray mt10'>已上市·1000-9999人·通信/网络设备</p>
                    </div>
                    <img className='yicon-xl radius10' src={testimg}/>
                </section>

                {/*公司制度*/}
                <section className='flex just-spa-bet paddlr20 mt10'>
                    <div className='flex just-spa-aro flex1'>
                        <div className='flex ali-cen '>
                            <i className='iconfont fo-24 mr10'> &#xe786;</i>
                            <p>上午9.00-下午05.30</p>
                        </div>
                        <div className='flex ali-cen'>
                            <i className='iconfont fo-24 mr10'>&#xe7d3;</i>
                            <p>双休</p>
                        </div>
                        <div className='flex ali-cen'>
                            <i className='iconfont fo-24 mr10'>&#xe7cf;</i>
                            <p>弹性工作</p>
                        </div>
                    </div>
                    <i className='iconfont fo-24 '> &#xe743;</i>
                </section>
                {/*公司福利 （滑块）*/}
                <section className={`${cssModule.swiperCard} flex padd20`}>
                    {this.companyFree.map((i, index) =>
                        (
                            <div className={cssModule.welfareCard} key={index}>
                                <i className={`iconfont mr10 ${i.icon}`} style={{fontSize: "20px"}}></i>
                                <p>{i.name}</p>
                            </div>
                        )
                    )}
                </section>
                {/*公司地址*/}
                <section className='padd20'>
                    <p className='font-wei600 fo-24'>公司地址</p>
                    <div className='mt20 flex just-spa-bet ali-cen'>
                        <p className='over-two-line wid-percent-70'>杭州市江滨区数字电视产业园长江路179号</p>
                        <div className={`flex ali-cen ${cssModule.NavigationIconBtn}`}>
                            <i className='iconfont fo-24 mr6'>&#xe607;</i>
                            导航
                        </div>
                    </div>
                </section>
                {/*公司介绍*/}
                <section className='padd20'>
                    <p className='font-wei600 fo-24'>公司介绍</p>
                    <p className='mt20 line-hei-26'>杭州市江滨区数字电视产业园长江路179号asjflkjdsklgjldskasdj是酒店管理会计的付款了赶紧打开福利国家
                        按时交付卡死了阿斯利康的法律案件咖啡碱阿斯利康房价拉克丝按时艰苦地方就爱上了开发爱上了附件打开静安寺ask放假啊
                        安防科技是老款的结果克里斯蒂 按实际付款阿萨的腹肌拉伤按时间利夫卡罗斯科夫</p>
                </section>
                {/*公司照片*/}
                <section className='padd20'>
                    <p className='font-wei600 fo-24'>公司照片</p>
                    <div className={`mt20 ${cssModule.companyImgBox}`}>
                        <img className={cssModule.companyImg} src={testimg}/>
                        <img className={cssModule.companyImg} src={testimg}/>
                        <img className={cssModule.companyImg} src={testimg}/>
                        <img className={cssModule.companyImg} src={testimg}/>
                        <img className={cssModule.companyImg} src={testimg}/>
                    </div>

                    <div className='mt40 flex just-spa-bet ali-cen'>
                        <div className=''>
                            <p className='over-one-line'>在华数浙江工作的感受怎么样</p>
                            <p className='mt10 fo-10 fo-gray'>有103位求职者想要了解</p>
                        </div>
                        <div className={`flex ali-cen ${cssModule.NavigationIconBtn}`}>
                            我也想看
                        </div>
                    </div>
                </section>
                {/*占位*/}
                <div style={{height:"60px",width:"100%"}}/>
                {/*模拟底部弹窗头部*/}
                <div className={cssModule.footModal}>
                    <i className={`iconfont fo-34 iconshang- mr6 transition-1 ${isShowPostModal ? cssModule.rotateR180 : ""}`}
                       onClick={this.openModal}/>
                    <div className='flex just-spa-bet'>
                        <div className='fo-20 relative'>
                            职位
                            <span className={cssModule.ModalNumTip}>9</span>
                        </div>
                        <i className='iconfont fo-100'>&#xe818;</i>
                    </div>
                    <div className='line-f3f3f3 mt10'></div>

                </div>
                {/*底部popup弹窗*/}
                <Modal
                    popup
                    visible={this.state.isShowPostModal}
                    onClose={this.onModalClose}
                    animationType="slide-up"
                    afterClose={() => {
                        this.onModalClose()
                    }}
                >
                    <div className={cssModule.Modal}>
                        <div className='paddlr20 pb20'>
                            <div className={cssModule.ModalHeader}>
                                <i className={`iconfont fo-34 iconshang- mt10 transition-1 ${isShowPostModal ? cssModule.rotateR180 : ""}`}
                                   onClick={this.onModalClose}/>
                                <div className='flex just-spa-bet'>
                                    <div className='fo-20 relative'>
                                        职位
                                        <span className={cssModule.ModalNumTip}>9</span>
                                    </div>
                                    <i className='iconfont fo-100'>&#xe818;</i>
                                </div>
                                <div className='line-f3f3f3 mt10'></div>
                            </div>
                            {
                                this.len.map((i,index) => (
                                    <div className='flex flex-col bg-White mt10' key={index}
                                         onClick={() => this.onGoTo('/postDetail')}>
                                        <section className='flex just-spa-bet ali-cen'>
                                            <div className='flex ali-cen'>
                                                <p className='font-wei600 fo-black fo-18 mr10'>WEB前端开发工程师</p>
                                                <span className='small-tag-line-orange'>校招</span>
                                            </div>
                                            <div>
                                                <p className='fo-green font-wei600'>6-10K·13薪</p>
                                            </div>
                                        </section>
                                        <section className='flex ali-cen flex-wrap mt14'>
                                            <span
                                                className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>HTML</span>
                                            <span
                                                className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>CSS</span>
                                            <span
                                                className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>JS</span>
                                            <span
                                                className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>VUE</span>
                                            <span
                                                className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>React</span>
                                        </section>
                                        <section className='flex ali-cen just-spa-bet mt10'>
                                            <div className='flex ali-cen '>
                                                <img className='yicon-26 radius50p mr8' src={testimg}/>
                                                <div className='fo-12'>陈女士 · 招聘者</div>
                                            </div>
                                        </section>
                                    </div>
                                ))
                            }
                        </div>
                    </div>
                </Modal>
            </div>
        );
    }
}

export default CompanyHomepage;